<template>
  <div class="task-progress" v-loading="isLoading">
    <div class="task-progress__items">
      <div class="task-progress-item">
        <div class="title">任务节点</div>
        <el-select
          v-model="filterListData[0].value"
          :teleported="false"
          filterable
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
          placeholder="请选择（可多选）"
          clearable
        >
          <el-option v-for="item in optionData" :key="item.id" :label="item.labelName" :value="item.id" />
        </el-select>
      </div>
    </div>
    <div class="task-progress__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { getAllListByType } from "@/apis/system";

const props = defineProps({
  filterList: [
    {
      title: "任务节点",
      filterId: "receive_task_id",
      condition: [
        {
          label: "在列表",
          value: "in"
        }
      ],
      option: {
        type: "MultipleSelect",
        lazy: false,
        dataSource: {},
        data: []
      },
      compare: "in",
      value: []
    }
  ]
});
const emit = defineEmits(["handelFilterData"]);
const filterListData = ref([]);

watch(
  () => props.filterList,
  newVal => {
    filterListData.value = [...newVal];
  },
  { deep: true, immediate: true }
);

const handelReset = () => {
  filterListData.value[0].value = [];
  emit("handelFilterData", filterListData.value);
};
const handelConfirm = () => {
  emit("handelFilterData", filterListData.value);
};

/**
 * 任务进度列表
 */
const isLoading = ref(false);
const optionData = ref([]);
const getTaskProgress = async () => {
  try {
    isLoading.value = true;
    const { data } = await getAllListByType({ type: "task" });
    optionData.value = data ?? [];
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
    console.log(err);
  }
};
getTaskProgress();
</script>

<style scoped lang="scss">
@import "receiveTaskName";
</style>
